<template>
    
        <fieldset>
      <legend>
商品详情
      </legend>
<p>
    <label for="id">编号：</label>
    <input type="text" name="id" id="id" v-model="prod.id" />
</p>
<p>
    <label for="name">名称：</label>
    <input type="text" name="name" id="name" v-model="prod.name"/>
    <span v-bind:class="{warn:isValid}">商品名不能玩为空</span>
</p>
<p>
    <label for="price">价格：</label>
    <input type="text" name="price" id="price" v-model="prod.price" />
</p>

<p>
    <input type="button" value="保存" @click="doAdd"/>
</p>
        </fieldset>
        </template>
<script>
export default {
    data:function(){
        return {
            prod:{id:0,name:'',price:0},
            isValid:true
        }
    },
       watch:{
prod:{
    handler(val){
        this.isValid=val.name==""?true:false
    },
    deep:true
}
    },
    methods:{
        doAdd:function(){
            this.$emit("doAdd",this.prod);
           
            //清空文本框
           this.prod={id:0,name:'',price:0};
        }
    }
}
</script>
<style scoped>
span{
        display: block;
    }
    .warn{
        color: red;
    }
</style>